<!-- 用户编辑弹窗 -->
<template>
  <el-dialog width="680px" :visible="visible" :lock-scroll="false" :destroy-on-close="true"
    custom-class="ele-dialog-form" :title="isUpdate?'修改用户':'添加用户'" @update:visible="updateVisible">
    <el-form ref="form" :model="form" :rules="rules" label-width="82px">
      <el-form-item label="头像：">
        <uploadImage :limit="1" v-model="form.avatar"></uploadImage>
      </el-form-item>
      <el-row :gutter="15">
        <el-col :sm="12">
          <el-form-item label="用户类型:" prop="user_type">
            <el-radio-group v-model="form.user_type">
              <el-radio :label="1">普通用户</el-radio>
              <el-radio :label="2">管理员</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="用户账号:" prop="username">
            <el-input clearable :maxlength="20" :disabled="isUpdate" v-model="form.username" placeholder="请输入用户账号" />
          </el-form-item>

          <el-form-item label="登录密码:" prop="password">
            <el-input show-password :maxlength="20" v-model="form.password" placeholder="请输入登录密码" />
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="用户昵称:" prop="nickname">
            <el-input clearable :maxlength="20" v-model="form.nickname" placeholder="请输入用户昵称" />
          </el-form-item>

          <el-form-item label="手机号:" prop="mobile">
            <el-input clearable :maxlength="11" v-model="form.mobile" placeholder="请输入手机号" />
          </el-form-item>


          <el-form-item label="角色:" prop="role_ids">
            <el-select multiple clearable class="ele-block" v-model="form.role_ids" placeholder="请选择角色">
              <el-option v-for="item in roleList" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
          </el-form-item>

        </el-col>
      </el-row>

    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消
      </el-button>
      <el-button type="primary" :loading="loading" @click="save">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import validate from 'ele-admin/packages/validate';
  import uploadImage from '@/components/uploadImage'

  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import regions from 'ele-admin/packages/regions';

  export default {
    name: 'UserEdit',
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object
    },
    components: {
      uploadImage

    },
    data() {
      return {
        // 省市区数据
        regions: regions,
        // 选中的省市区
        city: [],
        // 选中的省市
        provinceCity: [],
        // 选中的省
        province: [],
        // 表单数据
        form: {},
        // 表单验证规则
        rules: {
          username: [{
            required: true,
            message: '请输入用户账号',
            trigger: 'blur'
          }],
          user_type: [{
            required: true,
            message: '请选择用户类型',
            trigger: 'blur'
          }],
          role_ids: [{
            required: true,
            message: '请选择角色',
            trigger: 'blur'
          }],

          password: [{
            required: true,
            pattern: /^[\S]{5,18}$/,
            message: '密码必须为5-18位非空白字符',
            trigger: 'blur'
          }],
          mobile: [{
            pattern: validate.phone,
            message: '手机号格式不正确',
            trigger: 'blur'
          }]
        },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
        // 角色列表
        roleList:[],
        deptList: []
      };
    },
    watch: {
      data() {
        this.form = {};
        this.isUpdate = false;
      }
    },
    mounted() {
      this.queryRoles(); // 查询角色列表

    },
    methods: {
      /* 保存编辑 */
      save() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.loading = true;
            this.$http.post('/user/edit', this.form).then(res => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message({
                  type: 'success',
                  message: res.data.msg
                });
                if (!this.isUpdate) {
                  this.form = {};
                }
                this.updateVisible(false);
                this.$emit('done');
              } else {
                this.$message.error(res.data.msg);
              }
            }).catch(e => {
              this.loading = false;
              this.$message.error(e.message);
            });
          } else {
            return false;
          }
        });
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
      /* 查询角色列表 */
      queryRoles() {
        this.$http.get('/page/getRoleList').then(res => {
          if (res.data.code === 0) {
            this.roleList = res.data.data;
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          this.$message.error(e.message);
        });
      },

    }
  }
</script>

<style scoped>
</style>
